<div class="row">
    <div class="col-12">
        <div class="tabbable-custom">
            <div class="card">
                <div class="card-body">
                    <nav class="nav">
                        <ul class="nav nav-tabs d-flex align-items-center" id="app_tabs">
                            <li id="redis-cli" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?tabTag=redis-cli">
                                <a class="nav-link d-flex" href="?tabTag=redis-cli">redis-cli工具</a>
                            </li>
                            <li id="scan" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=scan">
                                <a class="nav-link d-flex" href="?tabTag=scan">scan检测</a>
                            </li>
                            <li id="memoryUsed" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=memoryUsed">
                                <a class="nav-link d-flex" href="?tabTag=memoryUsed">memoryUsed诊断</a>
                            </li>
                            <li id="idlekey" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=idlekey">
                                <a class="nav-link d-flex" href="?tabTag=idlekey">idlekey诊断</a>
                            </li>
                            <li id="hotkey" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=hotkey">
                                <a class="nav-link d-flex" href="?tabTag=hotkey">hotkeys/bigkeys/memkeys诊断</a>
                            </li>
                            <li id="deleteKey" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=deleteKey">
                                <a class="nav-link d-flex" href="?tabTag=deleteKey">删除任务</a>
                            </li>
                            <li id="slotAnalysis" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=slotAnalysis">
                                <a class="nav-link d-flex" href="?tabTag=slotAnalysis">集群slot分析</a>
                            </li>
                            <li id="scanClean" class="nav-item" data-url="${request.contextPath}/manage/app/tool/diagnostic/tool?appId=${appId!}&parentTaskId=${parentTaskId!}&auditId=${auditId!}&diagnosticStatus=${diagnosticStatus!}&tabTag=scanClean">
                                <a class="nav-link d-flex" href="?tabTag=scanClean">数据清理任务</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane active" id="redis-cliTab">
                </div>
                <div class="tab-pane" id="scanTab">
                </div>
                <div class="tab-pane" id="memoryUsedTab">
                </div>
                <div class="tab-pane" id="idlekeyTab">
                </div>
                <div class="tab-pane" id="hotkeyTab">
                </div>
                <div class="tab-pane" id="deleteKeyTab">
                </div>
                <div class="tab-pane" id="slotAnalysisTab">
                </div>
                <div class="tab-pane" id="scanCleanTab">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function showTab(tab) {
        $.get($("#" + tab).attr("data-url"), function (result) {
            $("#" + tab + "Tab").html(result);
        });
    }

    function refreshActiveTab() {
        var tab = getQueryString("tabTag");
        if (tab) {
            $("#" + tab + " a").addClass("active");
            $("#" + tab + "Tab").addClass("active").siblings().removeClass("active");
        } else {
            tab = "redis-cli";
            $("#" + tab + " a").addClass("active");
        }
        console.log("tab:" + tab)
        showTab(tab);
        $("#tabs li a").tooltip({placement: "bottom"});
    }

    $(function () {
        refreshActiveTab();
    });

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>